<template>
  <div class="template-wrap">
    <div :class="['icon-mod', { 'icon-info': type === 'info' }]" @click="toBack">
      <i class="el-icon-back" v-if="type !== 'info'"></i>
      <el-button v-if="type === 'info'" type="text">返回</el-button>
    </div>
    <iframe :class="['ifram-wrapper', { 'ifram-mod': type !== 'info' }]" :src="iframeSrc"> </iframe>
  </div>
</template>

<script>
import { getExternalLink } from '@common/api/staff';
export default {
  data() {
    return {
      iframeSrc: '',
      type: '',
    };
  },
  props: {
    userId: {
      type: String,
      default() {
        return '';
      },
    },
  },
  created() {
    const { templateId = '', type = '', infoUrl = '' } = this.$route.query;
    this.type = type;
    // console.log('details=== templateId', templateId, type, infoUrl);
    if (type === 'info') {
      this.iframeSrc = infoUrl;
    } else {
      getExternalLink({
        Module: 'TEMPLATE',
        ModuleId: templateId,
        MenuStatus: 'DISABLE',
      }).then(data => {
        const url = data.data.ConsoleUrl;
        const tempUrl = url?.replace('template-preview', 'template-mgr');
        this.iframeSrc = tempUrl;
        setTimeout(() => {
          if (type === 'mod') {
            this.iframeSrc = `https://beta.ess.tencent.cn/new-template-create?id=${templateId}`;
          }
          if (type === 'add') {
            this.iframeSrc = 'https://beta.ess.tencent.cn/new-template-create';
          }
        }, 2000);
      });
    }
  },
  methods: {
    // 返回列表
    toBack() {
      this.$router.push({
        path: '/template',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.template-wrap {
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  .icon-mod {
    position: absolute;
    top: 13px;
    left: 15px;
    z-index: 9;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    .el-icon-back {
      font-size: 20px;
      font-weight: bold;
      color: #2772f6;
    }
  }
  .icon-info {
    left: auto;
    right: 20px;
    top: 6px;
  }
  .ifram-wrapper {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
  }
  .ifram-mod {
    width: 100%;
    height: calc(100% + 51px);
    top: -51px;
    left: 0;
  }
}
</style>

